<template>
	<view class="container">
		<view class="banner">
			<view class="userinfo">
				<u-avatar size="110"></u-avatar>
				<view class="leftInfo">
					<view class="username">
						<text class="">{{username || '未登录用户'}}</text>
					</view>
					<view class="tip">
						<text>学生端</text>
					</view>
				</view>
				<view class="btn">
					<u-button @click="edit" style="font-size: 13px;background-color: #0045d0;color: #ffffff;border: none;opacity: 0.9;" :hair-line="false" shape="circle" >编辑个人资料</u-button>
				</view>
			</view>
		</view>
		<view class="notice">
			<view class="notB">
				<text>系统通知：</text>
				
			</view>
		</view>
		
		<view class="appList">
			<view class="app_item">
				<view class="app_item_1"  @click="user">
					<u-image width="80rpx" height="80rpx" src="/static/img/book.png"></u-image>
					<text style="margin-top: 8rpx;" >账号管理</text>
				</view>
				
				<view class="app_item_1"  @click="openPop">
					<u-image width="80rpx" height="80rpx" src="/static/img/book.png"></u-image>
					<text style="margin-top: 8rpx;" >修改密码</text>
				</view>
			</view>
		</view>
		
		<view class="logout">
			<u-button @click="logout" type="primary" style="box-shadow: 1px 5px 10px #a5ceff;" shape="circle">退出登录</u-button>
		</view>
		<u-popup v-model="show" mode="bottom">
			<view class="pop" style="height: 350rpx;padding: 40rpx;position: relative;">
				
				<view class="" >
					<u-field
						v-model="password"
						label="新密码"
						placeholder="请填写新密码"
					>
					</u-field>
				</view>
				
				<u-button  style="position: absolute;right: 3%;bottom: 10%;" type="primary"  :loading="loading" size="medium" @click="confirm">确认修改</u-button>
			</view>
		</u-popup>
		<view class="footer">
			<text>version {{vk.getVuex('$app.config.app.version')}}</text>
		</view>
	</view>
</template>

<script>
	import { logout } from "@/api/login.js"
	import { getProfile, updatePwd } from "@/api/user.js"
	
	var that;// 当前页面对象
	var vk; //vk依赖
	export default {
		data() {
			return {
				username:'',
				show:false,
				password:'',
				loading:false
			}
		},
		onLoad(options) {
			that = this;
			vk = that.vk
			that.options = options
			getProfile().then((data)=>{
				let [err, res] = data
				this.username = res.data.data.userName
				
				vk.setVuex('$user.userInfo.user',res.data.data)
			})
			
		},
		methods: {
			confirm(){
				this.loading = true
				if(this.password){
					updatePwd({
						newPassword:this.password
					}).then((data)=>{
						this.show = false
						this.loading = false
						let [ err, res] = data
						if(res.data.code == 200){
							vk.toast('修改成功','success',1500);
							this.newPassword = ''
						}else {
							vk.alert(res.data.msg || err);
						}
					})
				}
			},
			openPop(){
				this.show = true
			},
			//账号管理
			user(){
				// console.log('1')
				vk.navigateTo('/pages/user/user')
				// vk.alert('完善中'); f
				
			},
			edit(){
				
			},
			record(){
				uni.navigateTo({
					url:'../borrowingRecord/borrowingRecord'
				})
			},
			logout(){
				uni.showLoading({
					title:'正在退出',
				})
				
				logout().then((data)=>{
					uni.setStorageSync('stuToken','')
					let [ err, res] = data
					uni.showToast({
						title:'退出成功'
					}),
					setTimeout(()=>{
						uni.reLaunch({
							url:'../login/login'
						})
					},800)
				})
				
				
			}
		}
	}
</script>

<style scoped lang="scss">
	page {
		background-color: #eee;

		height: 100%;
	}
	.container {
		height: 100%;
		position: relative;
		.banner {
			padding: 40rpx;
			height: 375rpx;
			background-color: #0055ff;
			display: flex;
			align-items: center;
			position: relative;
			z-index: 1;
			.userinfo {
				margin-left: 10rpx;
				display: flex;
				align-items: center;
				
				.leftInfo {
					margin-left: 40rpx;
					font-size: 20px;
					color: #FFFFFF;
					.username {
						
						// font-weight: 700;
					}
					.tip {
						font-size: 14px;
						// color: #888888;
					}
				}
				.btn {
					position: absolute;
					right: 5%;
				}
			}
		}
		.notice {
			height: 100rpx;
			margin-top: -50rpx;
			padding: 0 20rpx;
			position: relative;
			z-index: 2;
			.notB {
				display: flex;
				border-radius: 12rpx;
				background-color: #FFFFFF;
				height: 100%;
				color: #ff0000;
				font-weight: 700;
				align-items: center;
				padding: 0 20rpx;
			}
		}
		.appList {
			padding: 20rpx;
			margin-top: 20rpx;
			.app_item {
				background-color: #FFFFFF;
				border-radius: 12rpx;
				padding: 40rpx;
				display: flex;
				flex-direction: row;
				.app_item_1 {
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					width: 150rpx;
				}
			}
		}
		.logout {
			width: 100%;
			padding: 0 80rpx;
			position: absolute;
			bottom: 6%;
			
		}
		.footer {
			width: 100%;
			text-align: center;
			padding: 0 80rpx;
			position: absolute;
			bottom: 1%;
		}
	}
</style>
